<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红岩革命历史博物馆</title>
    <link rel="stylesheet" type="text/css" href="下拉菜单.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 209000303   黄明杰 -->
    <div id="app">
    </div>
    <template id="root">
        <div class="nav">
            <!-- 一级菜单 -->
            <ul class="menu1">
                <li v-for="menu in menus" @mouseover="menu.show = ! menu.show" @mouseout="menu.show = ! menu.show">
                    <a :href="menu.url">{{menu.name}}
                        <span>{{menu.ename}}</span>
                    </a>
                      <!-- 二级菜单 -->
                    <ul class="menu2" v-show="menu.show">
                        <li v-for="subMenu in menu.subMenus">
                          <a :href="subMenu.url" class="sub-menu">{{subMenu.name}}</a>
                        </li>
                    </ul>
                      
                </li>
            </ul>
        </div>
        
    </template>
    <script>
        const app=Vue.createApp({
            template:"#root",
            data(){
                return{
                  menus:[{
                    name:'首页',ename:'Home',url:'#'},{name:'关于红岩',ename:'HongYan',url:'#',show: false, subMenus: 
                    [{"name":"红岩文化",url: '#'},{"name":"博物馆机构",url: '#'},{"name":"历史沿革",url: '#'}]
                    },{name:'公告动态',ename:'Dynamics',url:'#', subMenus:[{"name":"红岩文化",url: '#'},{"name":"博物馆机构",url: '#'},{"name":"历史沿革",url: '#'}]},
                    {name:'馆藏精品',ename:'Collections',url:'#'},{ name:'陈列展览',ename:'Exhibition',url:'#'},
                    { name:'研究开发',ename:'Research',url:'#'},{name:'公共教育',ename:'Education',url:'#'},
                    {name:'参观服务',ename:'Service',url:'#'},{name:'网上预约',ename:'Reservation',url:'#'}
                    ]          
                }
            }
        })
        const root=app.mount("#app")
    </script>
</body>
</html>